<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>签证详情</title>
		<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
		<meta http-equiv="content-security-policy"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #f3f3f2;
		}
		/**该css为解决滑动时候警告：Unable to preventDefault inside passive event listener**/
		 * { touch-action: pan-y; } 
		.mui-content {
			background-color: #f3f3f2;
		}
		.top-container {
			width: 100%;
			background-image: url(../img/detail/detail_bg.png);
			background-size: 100% 100%;
			text-align: center;
		}
		.top-back-div {
			height: 35px;
			width: 45px;
		}
		.top-back-div img {
			width: 35px;
			height: 35px;
			transform:rotate(90deg);
		}
		.package-name {
			margin-top: 10px;
			font-size: 16px;
			color: #FFFFFF;
		}
		.top-container .price {
			margin-top: 10px;
			font-size: 14px;
			color: #FFFFFF;
		}
		.top-container .duration {
			margin-top: 10px;
			font-size: 14px;
			color: #FFFFFF;
		}
		.duration-detail {
			width: 100%;
			margin-top: 10px;
			padding-bottom: 35px;
			text-align: center;
		}
		.duration-item {
			display: inline-block;
		}
		.duration-item .top {
			font-size: 13px;
			color: #FFFFFF;
		}
		.duration-item .bottom {
			font-size: 12px;
			color: #8DC8F9;
		}
		.comment-container {
			width: 92%;
			height: 80px;
			margin-top: -15px;
			margin-left: 4%;
			background-image: url(../img/detail/comment_bg.png);
			background-size: 100% 100%;
		}
		.package_detail {
			width: 100%;
			height: 80px;
		}
		.left-rating {
			display: inline-block;
		}
		.left-rating .title{
			font-weight: 500;
			font-size: 15px;
			color: #5C5759;
		}
		.left-rating .num{
			font-size: 14px;
			color: #B66FA2;
		}
		.right-tating {
			display: inline-block;
			float: right;
		}
		.star-div {
			display: inline-block;
		    vertical-align: middle;
		    margin-right: 5px;
		}
		.star-icon {
			width: 15px;
			height: 15px;
		}
		.more-div {
			display: inline-block;
		}
		.more-div .more-icon {
			width: 7px;
			height: 13px;
		}
		.line-div {
			width: 100%;
			height: 1px;
			background-color: #F3F3F3;
		}
		.package-choose-container {
			margin: 10px 0px;
			padding: 10px;
			background-color: #FFFFFF;
		}
		.current-package {
			position: relative;
		}
		.current-package .more-icon {
			width: 6px;
			height: 10px;
			vertical-align: middle;
		}
		.current-package .title {
			font-size: 15px;
			color: #5C5759;
		}
		.current-package .content {
			font-size: 12px;
			color: #919090;
		}
		.current-package .more-content {
			font-size: 12px;
			color: #5BA9F9;
		}
		.current-package .more {
			position: absolute;
			right: 10px;
			top: 0px;
		}
		.package-choose {
			/*margin-right: 10px;*/
			margin-top: 10px;
			padding:5px;
			border-width: 1px;
			border-color: #FF4747;
			border-style: solid;
			text-align: left;
		}
		.package-span {
			font-size: 12px;
			color: #FF4747;
		}
		.mui-slider {
			background-color: #FFFFFF;
			margin-bottom: 60px;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #5BA9F9;
			font-size: 16px;
		}
		.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
		    border-width: 0px;
		}
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
			background-color: #5BA9F9;
		}
		.mui-slider-item {
			min-height: 200px;
		}
		.info {
			position: relative;
			margin: 15px 18px 20px 25px;
		}
		.basic-info-img {
			width: 100%;
			height: auto;
		}
		.title-div {
			margin-top: 15px;
		}
		.title-div .title-icon{
			width: 15px !important;
			height: 15px;
			vertical-align: middle;
		}
		.title-div .title-span {
			font-size: 14px;
			color: #5C5759;
		}
		.li-div {
			margin-left: 15px;
		}
		.li-div li {
			font-size: 12px;
			color: #4C4C4C;
		}
		.transaction-container{
			clear:both;
			overflow:hidden;
			width:100%;height:49px;
			position:fixed;
			bottom:0;
		    z-index: 100;
			border-top:1px 
			solid #e0e0e0;
			background:#fff;
		}
		.transaction-container .start-div{
			display:inline-block;
			float:right;
			width:80%;
			height:49px;
			line-height:49px;
			text-align:center;
			color:#fff;
			font-family: "PingFang-SC-Regular"; 
			font-size:15px;
			background:#5BA9F9;
		    border-left-color: #FFFFFF;
		    border-left-style: solid;
		    border-left-width: 1px;
		}
		.transaction-container .consulting {
			width:20%;
			height:49px;
		    text-align: -webkit-center;
		}
		.transaction-container .consulting .consulting-img{
		    width: 26px;
		    height: 26px;
		    margin-top: 2px;
			display: block;
			position: relative;
		}
		.transaction-container .consulting .consulting-span{
			font-size: 13px;
			color: #1E79C5;
	    		vertical-align: bottom;
		}
		.tips-container {
			margin-top: 10px;
			margin-bottom: 5px;
		}
		.tips-container div{
			font-size: 13px;
			color: #989494;
		}
		.tips-container div span{
			font-size: 16px;
			color: #BE7DAB;
		}
		.material {
			margin-top: 10px;
		}
		.title-container {
			margin-top: 10px;
		}
		.title-container span{
			font-size: 15px;
			color: #5C5759;
		}
		.title-container .more {
			float: right;
		}
		.title-container .more .more-content{
			font-size: 15px;
			color: #5BA9F9;
		}
		.title-container .more .more-icon{
			width: 8px !important;
			height: 14px;
			vertical-align: middle;
		}
		.material-ul li {
			font-size: 12px;
			color: #4C4C4C;
		}
		.material-ul li span{
			font-size: 16px;
			color: red;
		}
		/*纵向时间轴*/
		.process-img {
			width: 100%;
			height: auto;
		}
		.time-vertical {
			margin-left: 16px;
		    list-style-type: none;
		    padding: 0px;
		    /*border-left: 1px solid #BE7DAB;*/
		    /*height: 210px;*/
		} 
		.time-vertical li {
		    height: 60px;
		    position: relative;
		}
		.time-vertical li .process {
			font-size: 13px;
			color: #4C4C4C;
			width: 100%;
		    position: absolute;
		    left: 17px;
    			top: 17px;
		}
		.time-vertical li .process .detail {
			font-size: 11px;
			color: #989494;
		}
		.time-vertical li a {
		    display: inline-block;
		    margin-left: 18px;
		    margin-top: 17px;
		    text-decoration: none;
		    color: #000;
		}
		.time-vertical li b:before {
		    content: '';
		    position: absolute;
		    top: 16px;
		    left: -13px;
		    width: 18px;
		    height: 18px;
		    border: 2px solid #BE7DAB;
		    border-radius: 10px;
		    background: #BE7DAB;
		}
		.time-vertical li span {
		    position: absolute;
		    color: #fff;
		    top: 17px;
		    left: -6px;
		}
		.time-vertical-line {
			width: 1px;
			height: 190px;
			position: absolute;
			top: 20px;
			left: 13px;
			background-color: #BE7DAB;
		}
		.tips-container {
			text-align: center;
			margin-top: 20px;
		}
		.tips-btn {
			border: 1px solid #BE7DAB;
			border-radius: 5px;
			padding: 5px 10px;
			color: #BE7DAB;
			font-size: 13px;
			text-align: center;
		}
		.bounced-box-container {
			display: none;
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0px;
			top: 0px;
		    z-index: 200;
	        overflow-y: scroll;
			background-color: rgba(0, 0, 0, 0.7);
		}
		.travel-info-container {
			width: 100%;
			height: 75%;
			position: absolute;
			left: 0px;
			bottom: 0px;
			background-color: #FFFFFF;
			text-align: center;
		}
		.start-build {
			position: absolute;
			bottom: 5px;
			left: 4%;
			width: 92%;
			height: 45px;
			background-color: #5BA9F9;
			border-radius: 8px;
			font-size: 20px;
			color: #FFFFFF;
			line-height: 50px;
			font-family: 'PingFang-SC-Regular';
		}
		.travel-title-container {
			text-align: center;
		}
		.travel-title-container .title {
			font-size: 18px;
		    color: #4C4C4C;
		    line-height: 45px;
		}
		.travel-title-container .close-div {
			position: absolute;
		    padding: 0px 10px;
		    line-height: 45px;	
		}
		.add-applicant-div {
			width: 100%;
			margin-top: 20px;
		}
		.add-applicant-div button {
			width: 50px;
			height: 40px;
		    color: #fff;
		    font-family: "PingFang-SC-Regular";
		    font-size: 15px;
		    background: #5BA9F9;
		}
		.close-div .close-icon {
		    width: 15px;
    			height: 15px;
		}
		.date-choose-container {
			width: 100%;
		}
		.date-choose-title {
			height: 40px;
		    text-align: left;
    			line-height: 40px;
		}
		.date-choose-title .title {
			font-size: 14px;
			color: #4C4C4C;
			margin-left: 10px;
		}
		.date-choose-title .tips {
			display: inline-block;
			float: right;
			margin-right: 10px;
			font-size: 12px;
			color: #4C4C4C;
		}
		.date-choose-input {
			width: 94%;
			height: 45px;
			margin-left: 3%;
			border: 1px solid #E5E5E5;
			text-align: left;
		}
		.date-choose-input span {
			line-height: 45px;
			margin-left: 10px;
			font-size: 14px;
			color: #9B9B9B;
		}
		.date-choose-input img {
			width: 24px;
			height: 24px;
			float: right;
			margin-top: 9px;
			margin-right: 10px;
		}
		.applicant-choose-container {
			width: 100%;
			margin-top: 20px;
		}
		.applicant-title-container {
			width: 100%;
			text-align: left;
			margin-bottom: 10px;
			display: none;
		}
		.applicant-title-div {
			display: inline-block;
		}
		.applicant-title-div .title {
			font-size: 16px;
			color: #4C4C4C;
			margin-left: 10px;
		}
		.applicant-title-div .num {
			font-size: 12px;
			color: red;
		}
		.add-person-div {
			display: inline-block;
			float: right;
			margin-right: 10px;
		}
		.add-person-div img {
			width: 20px;
			height: 20px;
			vertical-align: middle;
		}
		.add-person-div span {
			font-size: 12px;
			color: red;
		}
		.chooseed-person-title {
			margin-top: 10px;
		}
		.chooseed-person-title .title-tips {
			font-size: 16px;
			color: #4C4C4C;
			margin-left: 10px;
		    text-align: left;
    			margin-bottom: 10px;
		}
		.chooseed-person-title .title {
			width: 94%;
			height: 40px;
			margin-left: 3%;
			border: 1px solid #E5E5E5;
			line-height: 40px;
			font-size: 15px;
			color: #4C4C4C;
		}
		.chooseed-person-container {
			width: 94%;
			height: 81px;
			margin-left: 3%;
			border: 1px solid #E5E5E5;
			border-radius: 4px;
			position: relative;
		}
		.chooseed-person-container .item {
		    width: 80%;
			height: 40px;
			text-align: left;
		}
		.chooseed-person-container .line {
		    width: 75%;
			height: 1px;
			background-color: #E5E5E5;
			margin-left: 15px;
		}
		.chooseed-person-container .item .title {
			margin-left: 15px;
			line-height: 40px;
			font-size: 15px;
			color: #4C4C4C;
		}
		.chooseed-person-container .item .name {
			margin-left: 15px;
			line-height: 40px;
			font-size: 15px;
		}
		.delete-div {
			width: 17%;
			height: 55px;
			position: absolute;
			right: 0px;
			top: 13px;
			text-align: center;
			border-left: 1px solid #E5E5E5;
		}
		.delete-div img {
			width: 25px;
			height: 25px;
			margin-top: 15px;
		}
		.select-profession {
			display: inline-block;
			float: right;
			width: 40px;
			height: 40px;
			text-align: center;
		}
		.select-profession img {
			width: 24px;
			height: 24px;
			margin-top: 8px;
		}
		.create-order-tips {
			margin: 10px;
			font-family: 'AbadiMT-CondensedLight';
			font-size: 14px;
			color: #000000;
			text-align: left;
		}
		.chooseed-order-container {
			width: 94%;
			height: 81px;
			margin-left: 3%;
			border: 1px solid #F15C6F;
			border-radius: 4px;
			position: relative;
		}
		.chooseed-order-container .item {
		    width: 80%;
			height: 40px;
			text-align: left;
		}
		.chooseed-order-container .line {
		    width: 75%;
			height: 1px;
			background-color: #E5E5E5;
			margin-left: 15px;
		}
		.chooseed-order-container .item .title {
			margin-left: 15px;
			line-height: 40px;
			font-family: 'PingFangSC-Light';
			font-size: 12px;
			color: #676568;
		}
		.chooseed-order-container .item .name {
			margin-left: 15px;
			line-height: 40px;
			font-family: 'PingFangSC-Medium';
			font-size: 12px;
			color: #6A686A;
		}
		.ratio-div {
			line-height: 40px;
			font-family: 'PingFangSC-Light';
			font-size: 12px;
			color: #676568;
			display: inline-block;
			float: right;
			height: 40px;
			text-align: center;
		}
		.ratio-div span{
			color: #D0011B;
		}
		.btn-div-container {
			position: absolute;
			bottom: 5px;
			left: 4%;
			width: 92%;
			height: 45px;
		}
		.create-new-btn {
			width: 47%;
			height: 45px;
			background: #FFFFFF;
			border: 1px solid #CCCCCC;
			font-family: 'PingFangSC-Medium';
			font-size: 18px;
			color: #4A4A4A;
		}
		.continue-build-btn {
			width: 47%;
			height: 45px;
			margin-left: 10px;
			background: #1E79C5;
			font-family: 'PingFangSC-Medium';
			font-size: 18px;
			color: #FFFFFF;
		}
		.confirm-btn {
			position: absolute;
			bottom: 5px;
			left: 3%;
			width: 94%;
			height: 45px;
			border-radius: 8px;
			background-color: #5BA9F9;
			font-family: 'PingFangSC-Medium';
			font-size: 18px;
			color: #FFFFFF;
		}
		input[type=text] {
			margin-bottom: 0;
			height: 40px; 
			width: 80%; 
			border-radius:5px; 
			border-color: #E5E5E5;
			color:#999999;
			font-size: 12px;
		}
		::-webkit-input-placeholder{
		     font-size: 12px;
		     opacity: 0.8;
		 }
		 .person-ul {
		 	width: 100%;
		 }
		 .person-li {
		 	position: relative;
		 	height: 40px;
		 	width: 100%;
		 	line-height: 40px;
		 	text-align: left;
		 	margin: 0px 10px;
		 	border-bottom: 1px solid #E5E5E5;
		 }
		 .swiper-container {
			width: 100%;
			height: 100px;
    		 }
	     .swiper-slide {
		     background-position: center;
		     background-size: cover;
		     width: 25%;
		     height: 100px;
		     text-align: center;
	     }
	     .swiper-slide img {
	    		 width: 52px !important;
	    		 height: 64px;
	    		 margin-top: 20px;
	    }
	    .package-ul {
	    		margin: 0px 10px;
	    }
	    .uncheck-li {
	    		border-color: #D9D8D9;
	    }
	    .uncheck-text {
	    		color: #4C4C4C;
	    }
	    .package-goodsId, .apply-customer-Id, .postResultId {
	    		display: none;
	    }
	    input[type="radio"]{-webkit-appearance:none;outline: none;border-width: 0px;}
		input.check{background:url(../img/detail/unselect_icon.png) no-repeat center left;background-size:15px 15px;position:absolute;top:50%;left:10px;margin-top:-18px;width:50px;height:35px;}
		input.check:checked{background:url(../img/detail/choose_icon.png) no-repeat center left;background-size:15px 15px;}
		input.check:checked{background:url(../img/detail/choose_icon.png) no-repeat center left;background-size:15px 15px;}
		.checked{background:url(../img/detail/choose_icon.png) no-repeat left center;background-size:15px 15px;position:absolute;top:50%;left:15px;margin-top:-18px;width:50px;height:35px;}
	</style>
	<body>
		<div class="mui-content">
			<div class="top-container">
				<div class="top-back-div">
					<img src="../img/detail/down_white_icon.png" />
				</div>
				<div class="package-name"></div>
				<div class="price"></div>
				<div class="duration"></div>
				<!--<div class="line-div" style="margin-top: 10px;"></div>-->
				<div class="duration-detail">
					<div class="duration-item">
						<div id="validityTitle" class="top">3个月</div>
						<div class="bottom">有效时长</div>
					</div>
					<div class="duration-item" style="margin-left: 60px; margin-right: 60px;">
						<div id="longestStayTitle" class="top">3个月</div>
						<div class="bottom">最长停留</div>
					</div>
					<div class="duration-item">
						<div id="entryNumTitle" class="top">3个月</div>
						<div class="bottom">入境次数</div>
					</div>
				</div>
			</div>
			<div class="comment-container">
				<img class="package_detail" src="../img/detail/detail_bg_img.png" />
			</div>
			<div class="package-choose-container">
				<div class="current-package">
					<span class="title">当前套餐</span>
					<span class="content"></span>
					<div class="more">
						<span class="more-content"></span>
						<img class="more-icon" src="../img/detail/go_more.png" />
					</div>
				</div>
				<div class="package-choose default-goods">
					<span class="package-span name"></span>
					<span class="package-span price" style="float: right;"></span>
				</div>
			</div>
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
				基本信息
			</a>
					<a class="mui-control-item" href="#item2mobile">
				所需资料
			</a>
					<a class="mui-control-item" href="#item3mobile">
				办理流程
			</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="line-div"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<img class="basic-info-img" />
						<!--<div class="info">
							<div class="title-div">
								<img class="title-icon" src="../img/index/mine_icon_norm.png" />
								<span class="title-span">服务包含</span>
							</div>
							<div class="li-div">
								<li>签证在线服务</li>
								<li>日本签证</li>
							</div>
							<div class="title-div">
								<img class="title-icon" src="../img/index/mine_icon_norm.png" />
								<span class="title-span">受理范围</span>
							</div>
							<div class="li-div">
								<li>不限领区，全国受理</li>
							</div>
							<div class="title-div">
								<img class="title-icon" src="../img/index/mine_icon_norm.png" />
								<span class="title-span">办理须知</span>
							</div>
							<div class="li-div">
								<li>请按照真实访问目的申请，在日本有联系人的必须拍“探亲访友”/“商务”产品</li>
								<li>如隐瞒真实访问目的，会被直接拒签或多年内不得在入日本</li>
								<li>个别案件提出申请后有可能需要追加资料，要求面试，资料不受理被退回等情况。</li>
							</div>
						</div>	-->
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="swiper-container">
						    <div class="swiper-wrapper">
						            <div class="swiper-slide">
						            		<img class="swiper-img0" src="../img/detail/xueling_bg_norm.png" />
						            </div>
						            <div class="swiper-slide">
						            		<img class="swiper-img1" src="../img/detail/zaixiao_bg_norm.png" />
						            </div>
						            <div class="swiper-slide">
						            		<img class="swiper-img2" src="../img/detail/zaizhi_bg_norm.png" />
						            </div>
						            <div class="swiper-slide">
						            		<img class="swiper-img3" src="../img/detail/ziyou_bg_norm.png" />
						            </div>
						            <div class="swiper-slide">
						            		<img class="swiper-img4" src="../img/detail/tuixiu_bg_norm.png" />
						            </div>
						    </div>
						</div>
						<div class="line-div"></div>
						<div class="info">
							<div class="tips-container">
								<div>带<span>*</span>为必备资料</div>
								<div>资料详细要求，模板下载请点击“查看详细要求”</div>
							</div>
							<div class="line-div"></div>
							<div class="material">
								<div class="app-data-container">
									<div class="title-container">
										<span>APP拍摄资料</span>
										<div class="more">
											<span class="more-content">查看详细要求</span>
											<img class="more-icon" src="../img/detail/go_more.png" />
										</div>
									</div>
									<div id="AppData" class="material-ul">
										<!--<li>照片（APP拍摄）<span>*</span></li>
										<li>护照首页<span>*</span></li>
										<li>身份证<span>*</span></li>-->
									</div>
								</div>
								<div class="post-data-container">
									<div class="title-container">
										<span>邮寄材料</span>
										<div class="more">
											<span class="more-content">查看详细要求</span>
											<img class="more-icon" src="../img/detail/go_more.png" />
										</div>
									</div>
									<div id="postData" class="material-ul">
										<!--<li>护照（原件）<span>*</span></li>
										<li>资金证明（原件）<span>*</span></li>
										<li>营业执照或组织机构代码（复印件加盖公章）<span>*</span></li>-->
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<img class="process-img" />
						<!--<div class="info">
							<div class="time-vertical-line"></div>
							<ul class="time-vertical">
						        <li>
						        		<b></b><span>1</span>
						        		<div class="process">
						        			<div>准备并上传资料，完善申请表</div>
						        			<div class="detail">准备资料好后拍照上传，完善申请表</div>
						        		</div>
						        </li>
						        <li><b></b><span>2</span>
						        		<div class="process">
						        			<div>准备并上传资料，完善申请表</div>
						        			<div class="detail">选择在线支付方式支付费用</div>
						        		</div>
						        </li>
						        <li><b></b><span>3</span>
						        		<div class="process">
						        			<div>准备并上传资料，完善申请表</div>
						        			<div class="detail">按邮寄资料清单寄送资料</div>
						        		</div>
						        </li>
						        <li><b></b><span>4</span>
						        		<div class="process">
						        			<div>准备并上传资料，完善申请表</div>
						        			<div class="detail">签证专员预审资料，审核通过后第一时间安排送馆</div>
						        		</div>
						        </li>
						   </ul>
						   <div class="tips-container">
						   		<button class="tips-btn">查看温馨提醒</button>
						   </div>
						</div>-->
					</div>
				</div>
			</div>
			<div class="transaction-container">
				<div class="start-div">开始办理 </div>
				<div class="consulting">
					<img class="consulting-img" src="../img/detail/zixun_icon.png"></img>
					<span class="consulting-span">咨询</span>
				</div>
			</div>
			<div id="packageSelect" class="bounced-box-container">
				<div class="travel-info-container">
					<div class="travel-title-container">
						<div class="close-div">
							<img class="close-icon" src="../img/detail/close_icon.png" />
						</div>
						<span class="title">选择商品套餐</span>
					</div>
					<div class="line-div"></div>
					<div class="package-ul">
						<!--<div class="package-choose uncheck-li">
							<span class="package-span uncheck-text">北京寄出-全国受理</span>
							<span class="package-span uncheck-text" style="float: right;">¥1000.00</span>
						</div>
						<div class="package-choose uncheck-li">
							<span class="package-span uncheck-text">北京寄出-全国受理</span>
							<span class="package-span uncheck-text" style="float: right;">¥1000.00</span>
						</div>-->
					</div>
				</div>
			</div>
			<div id="travelInfo" class="bounced-box-container">
				<div class="travel-info-container">
					<div class="travel-title-container">
						<div class="close-div">
							<img class="close-icon" src="../img/detail/close_icon.png" />
						</div>
						<span class="title">出行信息</span>
					</div>
					<div class="line-div"></div>
					<div class="date-choose-container">
						<div class="date-choose-title">
							<span class="title">预计出行日期</span>
							<div class="tips">最早可出行：2018年11-16日</div>
						</div>
						<div data-options='{"type":"date"}' class="date-choose-input">
							<span class="dateResult">请选择日期</span>
							<img src="../img/detail/date_icon.png" />
						</div>
					</div>
					<div class="applicant-choose-container">
						<div class="applicant-title-container">
							<div class="applicant-title-div">
								<span class="title">申请人信息</span>
								<span class="num"></span>
							</div>
							<div class="add-person-div">
								<img src="../img/detail/add_person_icon.png" />
								<span>重新选择</span>
							</div>
						</div>
						<div class="chooseed-person-title">
							<div class="title-tips">申请人信息</div>
							<div class="title">选择申请人</div>
						</div>
						<div class="applicant-ul">
							<!--<div class="chooseed-person-container">
								<div class="item">
									<span class="title">旅客信息</span>
									<span class="name">张涛</span>
								</div>
								<div class="line"></div>
								<div class="item">
									<span class="title">旅客身份</span>
									<span class="name">在职人员</span>
									<div class="select-profession">
										<img src="../img/detail/down_icon.png" />
									</div>
								</div>
								<div class="delete-div">
									<img src="../img/detail/close_icon.png" />
								</div>
							</div>-->
						</div>
					</div>
					<div class="start-build">开始办理</div>
				</div>
			</div>
			<div id="continueBuild" class="bounced-box-container">
				<div class="travel-info-container">
					<div class="travel-title-container">
						<div class="close-div">
							<img class="close-icon" src="../img/detail/close_icon.png" />
						</div>
						<span class="title">是否继续办理</span>
					</div>
					<div class="line-div"></div>
					<div class="create-order-tips">已存在该商品的其他订单，选择继续办理或创建新订单？</div>
					<div class="chooseed-order-container">
						<div class="item">
							<span class="title">订单号：209920</span>
							<div class="ratio-div">出行日期：2018.11.20</div>
						</div>
						<div class="line"></div>
						<div class="item">
							<span class="name">苏珊</span>
							<span class="title">在职人员</span>
							<div class="ratio-div">
								<span>100%</span>资料已上传
							</div>
						</div>
						<div class="delete-div">
							<img src="../img/detail/choose_icon.png" />
						</div>
					</div>
					<div class="btn-div-container">
						<button class="create-new-btn">创建新订单</button>
						<button class="continue-build-btn">继续办理</button>
					</div>
				</div>
			</div>
			<div id="selectPerson" class="bounced-box-container">
				<div class="travel-info-container">
					<div class="travel-title-container">
						<div class="close-div">
							<img class="close-icon" src="../img/detail/close_icon.png" />
						</div>
						<span class="title">选择申请人</span>
					</div>
					<div class="line-div"></div>
					<div class="add-applicant-div">
						<input type="text" id="applicantName" placeholder="请输入真实中文名字"/>
						<button>添加</button>
					</div>
					<div class="person-ul">
						<!--<div class="person-li">
							<input type="checkbox" name="items" value="足球" />足球
						</div>-->
					</div>
					<div class="btn-div-container">
						<button class="confirm-btn">确定</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var goodsId = base.getParameter("goodsId");
		var customerId = base.getParameter("customerId");
		var cuntryId = base.getParameter("cuntryId");
		var consularDistrictName = base.getParameter("consularDistrictName");
		var postType = 3;//3=在职人员 
		var userId = "";
		var applicantList = [];
		var needDataList = [];
		var postPicker = null;
		(function($, doc) {
			$.init();
			mui('.mui-slider').slider().stopped = true;
			getGoodsInfoData();
			getGoodsListData();
			getFindAllVisaDataType();
			var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
			$('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
					//force repaint
					sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
				}
			});
			//在职经历
			postPicker = new $.PopPicker();
			//时间选择器
			$('.date-choose-container').on('tap', '.date-choose-input',function(e) {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var date = getBeginDate();
					var optionsJson = '{"type":"date","beginYear":'+date.beginYear+', "beginMonth":'+date.beginMonth+', "beginDay": '+date.beginDay+'}';
					var options = JSON.parse(optionsJson);
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function(rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			}, false);
		})(mui, document);
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		function getBeginDate() {
			var beginVisaDtae = 15;
			var now=new Date();
			var beginDay = now.getDate();
			var beginMonth = now.getMonth()+1;
			var beginYear = now.getFullYear();
			var mm = (!(beginYear % 4) & (!!(beginYear % 100))) | (!(beginYear % 400)) ? 29 : 28;
			if (beginMonth == 12) {
				mm = 31;
				if (beginDay+beginVisaDtae >= 31) {
					beginDay=beginDay+beginVisaDtae-mm;
					beginMonth=1;
					beginYear +=1; 
				} else {
					beginDay+=beginVisaDtae;
				}
			} else if (beginMonth == 2) { //2月份 mm为是否为闰年
				if (beginDay+beginVisaDtae > mm) {
					beginDay=beginDay+beginVisaDtae-mm;
					beginMonth+=1;
				} else {
					beginDay+=beginVisaDtae;
				}
			} else {
				if ([1,3,5,7,8,10].indexOf(beginMonth) > -1){ //31天的月份
					mm = 31;
					if (beginDay+beginVisaDtae >= 31) {
						beginDay=beginDay+beginVisaDtae-mm;
						beginMonth+=1;
					} else {
						beginDay+=beginVisaDtae;
					}
				} else { //30天的月份
					mm = 30;
					if (beginDay+beginVisaDtae >= 30) {
						beginDay=beginDay+beginVisaDtae-mm;
						beginMonth+=1;
					} else {
						beginDay+=beginVisaDtae;
					}
				}
			}
			var dateData = {
				beginYear: beginYear,
				beginMonth: beginMonth,
				beginDay: beginDay
			}
			return dateData;
		}
		var swiper = new Swiper('.swiper-container', {
	       	grabCursor: true,
	       	centeredSlides: true,
	       	slidesPerView: 'auto',
	       	pagination: {
				el: '.swiper-pagination',
	       	},
	    });
	    swiper.slideTo(2); //默认为在职人员     
	    //监听滚动
		swiper.on('slideChangeTransitionEnd', function () {
			$('.swiper-img0').attr("src", "../img/detail/xueling_bg_norm.png");
			$('.swiper-img1').attr("src", "../img/detail/zaixiao_bg_norm.png");
			$('.swiper-img2').attr("src", "../img/detail/zaizhi_bg_norm.png");
			$('.swiper-img3').attr("src", "../img/detail/ziyou_bg_norm.png");
			$('.swiper-img4').attr("src", "../img/detail/tuixiu_bg_norm.png");
			switch (swiper.activeIndex){
			 	case 0:
			 		$('.swiper-img0').attr("src", "../img/detail/xueling_bg_pressed.png");
			 		break;
			 	case 1:
			 		$('.swiper-img1').attr("src", "../img/detail/zaixiao_bg_pressed.png");
			 		break;
			 	case 2:
			 		$('.swiper-img2').attr("src", "../img/detail/zaizhi_bg_pressed.png");
			 		break;
			 	case 3:
			 		$('.swiper-img3').attr("src", "../img/detail/ziyou_bg_pressed.png");
			 		break;
			 	case 4:
			 		$('.swiper-img4').attr("src", "../img/detail/tuixiu_bg_pressed.png");
			 		break;
			}
			postType = swiper.activeIndex*1+1;
			if (needDataList.length==0) return;
			for (var index in needDataList) {
				if (needDataList[index].dataTypeId == (swiper.activeIndex*1+1)) {
					var _appDataList = needDataList[index].appPhotoDataList;
					var _postDataList = needDataList[index].postDataList;
					getNeedData(_appDataList, _postDataList);
					break
				} else {
					$(".app-data-container").hide();
					$(".post-data-container").hide();
				}
			}
		});
		$(".swiper-wrapper").on("click",".swiper-slide",function(){
	    		var index = $(this).index();
	    		swiper.slideTo(index);
	    	})
		$('.transaction-container').on('tap','.start-div', function() {
			var date = getBeginDate();
			$('.date-choose-title .tips').text('最早可出行：'+date.beginYear+'年'+date.beginMonth+'月'+date.beginDay+'日');
			$('#travelInfo').show();
		})
		$('.transaction-container').on('tap', '.consulting', function() {
			window.location.href = 'tel://13129330825';
		})
		$('.chooseed-person-title').on('tap','.title', function() {
			$('#travelInfo').hide();
			$('#selectPerson').show();
			getVisaApplyCustomerList();
		})
		$('.applicant-choose-container').on('tap', '.add-person-div', function() {
			$('#travelInfo').hide();
			$('#selectPerson').show();
			getVisaApplyCustomerList();
		})
		$('.applicant-ul').on('tap', '.showProfession', function(e){
			var _self = this;
			postPicker.show(function(items) {
				jQuery(_self).find(".postResultTitle").html(_getParam(items[0], "text"));
				jQuery(_self).find(".postResultId").html(_getParam(items[0], "id"));
			});
		});
		function getFindAllVisaDataType() {
			var params = {
				goodsId: goodsId
			}
			base.postData(base.url.findAllVisaDataType, params, function(data) {
				var list = data.extendData.visaDataTypes;
				postPicker.setData(list);
			})
		}
		$('.btn-div-container').on('tap', '.confirm-btn', function() {
			var _applicantList = [];
			$(".person-ul").find(".person-li").each(function() { 
				if($(this).find('input').is(':checked')) {
					var _applyCustomerId = $(this).find('div').text();
					console.log(_applyCustomerId);
					_applicantList.push({applyCustomerName: $(this).find('input').val(), applyCustomerId: _applyCustomerId});
				}
			});
			applicantList = _applicantList;
			var html = '';
			if (applicantList.length>0) {
				$(".applicant-title-div .num").text("（共"+applicantList.length+"人）")
				$(".chooseed-person-title").hide();
				$(".applicant-title-container").show();
				for (var index in applicantList) {
					html+= getListItem(applicantList[index]);
				}
			} else {
				$(".chooseed-person-title").show();
				$(".applicant-title-container").hide();
			}
			$('.applicant-ul').html(html);
			$('#travelInfo').show();
			$('#selectPerson').hide();
		})
		$('.applicant-ul').on('tap', '.delete-div', function() {
			var _applyCustomerId = $(this).closest(".chooseed-person-container").find(".apply-customer-Id").text();
			removeAaary(applicantList, _applyCustomerId);
			$(this).parents(".chooseed-person-container").remove();
			$(".chooseed-person-title").show();
			$(".applicant-title-container").hide();
			console.log(applicantList);
		})
		$('.add-applicant-div').on('tap', 'button', function() {
			var _applicantName = $("#applicantName").val();
			if (_applicantName == ''||_applicantName==null) {
				mui.toast("请输入申请人姓名");
				return;
			}
			var params = {
				customerId: customerId,
				applyCustomerName: _applicantName
			};
			base.postData(base.url.addVisaApplyCustomerInfo,params,function(data) {
				mui.toast(data.message);
				if (data.success) {
					getVisaApplyCustomerList();
				}
			});
		})
		$('.travel-info-container').on('tap', '.start-build', function() {
			if ($('.postResultId').text() == 0) {
				mui.toast("请选择旅客身份信息");
				return;
			}
			if ($('.dateResult').text() == '请选择日期') {
				mui.toast("请选择出行日期");
				return;
			}
			var _applyCustomerId = $('.applicant-ul').find('.apply-customer-Id').text();
			var _price = $(".top-container .price").text();
			var params = {
				userId: userId,
				applyCustomerId: _applyCustomerId,
				travelDate: $('.dateResult').text(),
				customerId: customerId,
				goodsId: goodsId,
				price: _price.substring(1, _price.length),
				dataTypeId: $('.postResultId').text() 
			}
			base.postData(base.url.addVisaOrderInfo, params, function(data) {
				if (data.success) {
					window.localStorage.removeItem("isStepOrder"); //清除缓存的是否到第三部
					window.location.href = "dataUpload.html?customerId="+customerId+"&orderNo="+data.extendData.orderNo+"&applyCustomerId="+_applyCustomerId;
				} else {
					mui.toast(data.message);
				}
			})
		})
		$('.top-container').on('tap', '.top-back-div', function() {
			mui.back();
		})
		$('.travel-title-container').on('tap', '.close-div', function() {
			$('#travelInfo').hide();
			$('#packageSelect').hide();
			$('#selectPerson').hide();
		})
		$('.package-choose-container').on('tap', '.package-choose', function() {
			getGoodsListData();
			$('#packageSelect').show();
		})
		$('.package-ul').on('tap', '.package-choose', function() {
			goodsId = $(this).find('.package-goodsId').text();
			getGoodsInfoData();
			$('#packageSelect').hide();
		})
		$('.material').on('tap', '.title-container', function() {
			window.location.href = "needDataDescribe.html?goodsId="+goodsId+"&type="+postType;
		})
		//获取商品详情
		function getGoodsInfoData() {
			base.setWait('正在获取数据');
			base.postData(base.url.getGoodsInfo, {goodsId: goodsId}, getGoodsInfoSuccess);
		}
		function getGoodsInfoSuccess(data) {
			if (data.success) {
				userId = data.extendData.userId;
				$(".package-name").text(data.extendData.goodsName);
				$(".top-container .price").text("¥"+data.extendData.presentPrice);
				$(".top-container .duration").text(data.extendData.howLong);
				$("#validityTitle").text(data.extendData.validity);
				$("#longestStayTitle").text(data.extendData.longestStay);
				$("#entryNumTitle").text(data.extendData.entryNum);
				$(".basic-info-img").attr("src", data.extendData.basicInfoImg);
				$(".process-img").attr("src", data.extendData.processImg);
				$(".current-package .content").text("（商业编号："+data.extendData.goodsId+"）");
				$(".default-goods .name").text(data.extendData.goodsName);
				$(".default-goods .price").text("¥"+data.extendData.presentPrice);
				needDataList = data.extendData.dataList;
				for (var index in needDataList) {
					if (needDataList[index].dataTypeId == 3) {
						var _appDataList = needDataList[index].appPhotoDataList;
						var _postDataList = needDataList[index].postDataList;
						getNeedData(_appDataList, _postDataList);
						break
					} else {
						$(".app-data-container").hide();
						$(".post-data-container").hide();
					}
				}
			}
		}
		function getNeedData(_appDataList, _postDataList) {
			var appHtml = '';
			if (_appDataList.length>0) {
				$(".app-data-container").show();
				for (var index in _appDataList) {
					appHtml += '<li>'+_appDataList[index].appPhotoDataName+'<span>'+(_appDataList[index].isRequired==1?'*':'')+'</span></li>'
				}
			} else {
				$(".app-data-container").hide();
			}
			$("#AppData").html(appHtml);
			var postHtml = '';
			if (_postDataList.length>0) {
				$(".post-data-container").show();
				for (var index in _postDataList) {
					postHtml += '<li>'+_postDataList[index].postDataName+'<span>'+(_postDataList[index].isRequired==1?'*':'')+'</span></li>'
				}
			} else {
				$(".post-data-container").hide();
			}
			$("#postData").html(postHtml);
		}
		//根据国家查询商品
		function getGoodsListData() {
			var params = {
				cuntryId: cuntryId,
				consularDistrictName: consularDistrictName
			}
			base.postData(base.url.getGoodsList, params, getGoodsListSuccess);
		}
		function getGoodsListSuccess(data) {
			if (data.success) {
				var goodsList = data.extendData.goodsList;
				$(".current-package .more-content").text("全部（"+goodsList.length+"）");
				var goodsHtml = '';
				for(var index in goodsList) {
					if (goodsList[index].goodsId == goodsId) {
						goodsHtml+= '<div class="package-choose">'
						goodsHtml+= '	<span class="package-goodsId">'+goodsList[index].goodsId+'</span>'
						goodsHtml+= '	<span class="package-span">'+goodsList[index].goodsName+'</span>'
						goodsHtml+= '	<span class="package-span" style="float: right;">¥'+goodsList[index].originalPrice+'</span>'
						goodsHtml+= '</div>'
					} else {
						goodsHtml+= '<div class="package-choose uncheck-li">'
						goodsHtml+= '	<span class="package-goodsId">'+goodsList[index].goodsId+'</span>'
						goodsHtml+= '	<span class="package-span uncheck-text">'+goodsList[index].goodsName+'</span>'
						goodsHtml+= '	<span class="package-span uncheck-text" style="float: right;">¥'+goodsList[index].originalPrice+'</span>'
						goodsHtml+= '</div>'
					}
				}
				$(".package-ul").html(goodsHtml);
			}
		}
		function getVisaApplyCustomerList() {
			var url = base.url.getVisaApplyCustomerList;
			var data = {
				customerId: customerId
			};
			base.postData(url,data,getVisaApplyCustomerListSuccess);
		}
		function getVisaApplyCustomerListSuccess(data) {
			if (data.success) {
				var list = data.extendData.applyCustomerList||[];
				var html = '';
				if (list.length>0) {
					for (var index in list) {
						html+= getSelectListItem(list[index]);
					}
				}
				$('.person-ul').html(html);
			} else {
				mui.toast(data.message);
			}
		}
		function getListItem(item) {
			var html = '';
			html += '<div class="chooseed-person-container">'
			html += 		'<div class="item">'
			html += 			'<span class="title">旅客信息</span>'
			html += 			'<span class="apply-customer-Id">'+item.applyCustomerId+'</span>'
			html += 			'<span class="name apply-customer-name">'+item.applyCustomerName+'</span>'
			html += 		'</div>'
			html += 	'	<div class="line"></div>'
			html += 	'	<div class="item showProfession">'
			html += 		'	<span class="title">旅客身份</span>'
			html += 		'	<span class="name postResultId">0</span>'
			html += 		'	<span class="name postResultTitle">请选择</span>'
			html += 		'	<div class="select-profession">'
			html += 		'		<img src="../img/detail/down_icon.png" />'
			html += 		'	</div>'
			html += 	'	</div>'
			html += 	'	<div class="delete-div">'
			html += 	'		<img src="../img/detail/close_icon.png" />'
			html += 	'	</div>'
			html += '</div>'
			return html;
		}
		function getSelectListItem(item) {
			var html = '';
			html += '<div class="person-li">'
			html += 		'<div class="apply-customer-Id">'+item.applyCustomerId+'</div>'
			html += 		'<input type="radio" name="items" value="'+item.applyCustomerName+'" class="check"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+item.applyCustomerName+''
			html += '</div>'
			return html;
		}
		/*删除数组中的某一个对象
		_arr:数组
		_obj:需删除的对象
		*/
		function removeAaary(_arr, _obj) {
		    var length = _arr.length;
		    for (var i = 0; i < length; i++) {
		        if (_arr[i].applyCustomerId == _obj) {
		            if (i == 0) {
		                _arr.shift(); //删除并返回数组的第一个元素
		                return _arr;
		            } else if (i == length - 1) {
		                _arr.pop();  //删除并返回数组的最后一个元素
		                return _arr;
		            } else {
		                _arr.splice(i, 1); //删除下标为i的元素
		                return _arr;
		            }
		        }
		    }
		}
	</script>
</html>
